import { defineComponent, withDefaults,defineProps, useAttrs, onMounted } from 'vue'
import type { InternalRowData } from 'naive-ui/es/data-table/src/interface'
import { NTreeSelect } from 'naive-ui'

export default defineComponent({
  name: 'PeaceTreeSelect',
  // props: withDefaults(defineProps<TreeSelectorProps>(),{multiple:false}),
  props: {
    api: {
      type: Function as PropType<(input?: object) => Promise<unknown>>,
      required: false,
    },
    apiParam: {
      type: Object,
      required: false,
    },
  },
  setup(props, { emit }) {
    const attrs = useAttrs()
    const slots = useSlots()
    const options = ref<InternalRowData>([])
    // console.log(props.api,"props.api")
    // console.log(props.apiParam,"props.apiParam")
    onMounted( () => {
      if (props.api){
        props.api(props.apiParam).then(res=>{
          options.value =  res as InternalRowData[]
          console.log(options.value,res,"???")
        })
      }
    })
    return () => (
      <NTreeSelect
        clearable
        filterable
        options={options.value}
        {...attrs}
        {...slots}
        style={{
          width: '200px',
          ...(attrs.style || {})
        }}
      />
    )
  },
})
